<html>
    <!--
      Mix unit value: Motion

      This benchmark mixes simple unit values.
    -->
    <head>
        <style>
            body {
                padding: 0;
                margin: 0;
            }

            .container {
                padding: 100px;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }

            .container > div {
                width: 100px;
                height: 100px;
            }

            .box {
                width: 10px;
                height: 100px;
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>
        <script type="module" src="/src/imports/framer-motion-dom.js"></script>
        <script type="module">
            const { mix } = window.Motion

            /**
             * Create an interpolate function that mixes unit values.
             */
            const mixer = mix(
                [100, "50vh", "100px", "#fff"],
                [0, "0vh", "0px", "#000"]
            )
            const numRuns = 1000000
            let startTime = performance.now()
            for (let i = 0; i < numRuns; i++) {
                mixer(i / numRuns)
            }

            const finish = performance.now() - startTime
            console.log(`Total time: ${finish}ms`)
        </script>
    </body>
</html>
